<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情 | Bootstrap 博客演示</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="index.html">博客演示</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">文章</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container my-5">
        <div class="row">
            <!-- 文章内容 -->
            <div class="col-md-8">
                <article class="card mb-4">
                    <img src="https://via.placeholder.com/1200x400" class="card-img-top" alt="文章封面">
                    <div class="card-body">
                        <div class="mb-3 text-muted">
                            <span class="badge bg-secondary me-2">前端开发</span>
                            <span class="me-3"><i class="bi bi-calendar-event"></i> 2023年10月1日</span>
                            <span><i class="bi bi-eye"></i> 阅读 1234</span>
                        </div>
                        <h1 class="card-title mb-4">Bootstrap 5 响应式设计最佳实践</h1>
                        <div class="card-text">
                            <p class="lead">Bootstrap 5 是目前最流行的前端框架之一，它提供了丰富的组件和工具，可以帮助开发者快速构建响应式网站。本文将介绍一些使用 Bootstrap 5 进行响应式设计的最佳实践。</p>

                            <h2>1. 移动优先设计理念</h2>
                            <p>Bootstrap 采用移动优先的设计理念，这意味着所有的样式都是先针对移动设备设计，然后通过媒体查询为更大屏幕添加样式。这种方法可以确保网站在各种设备上都有良好的显示效果。</p>

                            <blockquote class="blockquote border-start border-primary ps-3 my-4">
                                <p class="mb-0">移动优先设计不仅是一种技术选择，更是一种用户体验策略，确保大多数用户获得最佳体验。</p>
                            </blockquote>

                            <h2>2. 栅格系统的灵活运用</h2>
                            <p>Bootstrap 的栅格系统是其核心功能之一，通过将页面分为 12 列，可以轻松创建各种布局。在实际开发中，我们应该充分利用栅格系统的断点（breakpoint）来适配不同屏幕尺寸。</p>

                            <pre class="bg-light p-3 rounded"><code>&lt;div class="container"
  &lt;div class="row"
    &lt;div class="col-12 col-md-8 col-lg-9"
      主内容区域
    &lt;/div&gt;
    &lt;div class="col-12 col-md-4 col-lg-3"
      侧边栏
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <h2>3. 组件的合理使用</h2>
                            <p>Bootstrap 提供了大量现成的组件，如导航栏、卡片、模态框等。合理使用这些组件可以大大提高开发效率，但也要注意不要过度使用，以免影响页面性能。</p>

                            <div class="alert alert-info mt-4">
                                <strong>提示：</strong> 使用 Bootstrap 组件时，可以通过自定义 CSS 来覆盖默认样式，以满足项目的个性化需求。
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 作者信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>关于作者</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <img src="https://via.placeholder.com/100" class="rounded-circle me-3" alt="作者头像" width="100">
                            <div>
                                <h6 class="mb-1">张开发</h6>
                                <p class="text-muted mb-0">资深前端工程师，5年Bootstrap使用经验，热衷于分享前端开发技巧和最佳实践。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 评论区 -->
                <div class="card">
                    <div class="card-header">
                        <h5>评论 (3)</h5>
                    </div>
                    <div class="card-body">
                        <!-- 评论输入框 -->
                        <div class="mb-4">
                            <textarea class="form-control" rows="3" placeholder="写下你的评论..."></textarea>
                            <button class="btn btn-primary mt-2">提交评论</button>
                        </div>

                        <!-- 评论列表 -->
                        <div class="mb-3">
                            <div class="d-flex mb-3">
                                <img src="https://via.placeholder.com/50" class="rounded-circle me-3" alt="用户头像" width="50">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">李用户</h6>
                                    <p class="text-muted small mb-1">2023年10月2日</p>
                                    <p>非常实用的文章，学到了很多Bootstrap使用技巧！</p>
                                </div>
                            </div>

                            <div class="d-flex mb-3">
                                <img src="https://via.placeholder.com/50" class="rounded-circle me-3" alt="用户头像" width="50">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">王前端</h6>
                                    <p class="text-muted small mb-1">2023年10月3日</p>
                                    <p>栅格系统那部分讲得很清楚，解决了我之前的疑惑。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="col-md-4">
                <!-- 搜索框 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="搜索文章...">
                            <button class="btn btn-primary" type="button">搜索</button>
                        </div>
                    </div>
                </div>

                <!-- 热门文章 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>热门文章</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">CSS Grid 布局完全指南</h6>
                            </div>
                            <small class="text-muted">2023年9月15日</small>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">JavaScript 异步编程模式</h6>
                            </div>
                            <small class="text-muted">2023年9月20日</small>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">React Hooks 实战教程</h6>
                            </div>
                            <small class="text-muted">2023年9月25日</small>
                        </a>
                    </div>
                </div>

                <!-- 分类标签 -->
                <div class="card">
                    <div class="card-header">
                        <h5>文章分类</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex flex-wrap gap-2">
                            <a href="#" class="badge bg-primary">前端开发</a>
                            <a href="#" class="badge bg-secondary">Bootstrap</a>
                            <a href="#" class="badge bg-success">CSS</a>
                            <a href="#" class="badge bg-danger">JavaScript</a>
                            <a href="#" class="badge bg-warning">响应式设计</a>
                            <a href="#" class="badge bg-info">HTML5</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container text-center">
            <p>&copy; 2023 博客演示 - 使用Bootstrap构建</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>